<template>
  <div class="main">
    <div style="height:50px">
      <div class="go-search" @click="goSearch()">
        <div class="logo">
          <img src="../assets/images/tool/search.png" width="35" height="35">
        </div>
        <div class="search-content">
          <span class="icon-search"></span>
          <span>旅行地、景点、酒店</span>
        </div>
      </div>
    </div>
    <div class="div-line">
      <div class="jdmp" @click="goAttractions()">
        景点门票
      </div>
      <div class="wyyc">
        文艺演出
      </div>
    </div>
    <div class="div-line">
      <div class="snyry">
        市内一日游
      </div>
      <div class="dry">
        多日游
      </div>
      <div class="bc">
        包车
      </div>
    </div>
    <div class="div-line">
      <div class="ttc">
        土特产
      </div>
      <div class="gyp">
        工艺品
      </div>
    </div>
    <div class="div-line">
      <div class="ms">
        民宿
      </div>
      <div class="ms">
        露营客栈
      </div>
      <div class="ms">
        酒店
      </div>
    </div>
    <div class="div-line">
      <div class="cy">
        餐娱
      </div>
      <div class="cy">
        电影
      </div>
      <div class="cy">
        KTV
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  created() {
    // console.group("created 创建完毕状态===============》");
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "0" });
  },
  methods: {
    goSearch() {
      this.$router.push({ path: "/serch" });
    },
    goAttractions() {
      this.$router.push({ path: "/attractions" });
    }
  }
};
</script>
<style scoped>
.main > div {
  margin: 2px 0;
}

.div-line {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.div-line > div {
  border-radius: 5px;
  float: left;
}

.jdmp {
  text-align: center;
  height: 90px;
  width: 50%;
  background-image: url(../assets/images/tool/jdmp.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 90px;
  color: #fff;
  font-size: 20px;
}
.wyyc {
  text-align: center;
  height: 90px;
  width: 50%;
  background-image: url(../assets/images/tool/wyyc.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 90px;
  color: #fff;
  font-size: 20px;
}
.snyry {
  text-align: center;
  height: 90px;
  width: 33.33%;
  background-image: url(../assets/images/tool/snyry.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 90px;
  color: #fff;
  font-size: 20px;
}
.dry {
  text-align: center;
  height: 90px;
  width: 33.33%;
  background-image: url(../assets/images/tool/dry.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 90px;
  color: #fff;
  font-size: 20px;
}
.bc {
  text-align: center;
  height: 90px;
  width: 33.33%;
  background-image: url(../assets/images/tool/bc.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 90px;
  color: #fff;
  font-size: 20px;
}
.ttc {
  text-align: center;
  height: 40px;
  width: 50%;
  background: linear-gradient(#7cacf3, #ff4500);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}
.gyp {
  text-align: center;
  height: 40px;
  width: 50%;
  background: linear-gradient(#7cacf3, #ff4500);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}
.ms {
  text-align: center;
  height: 40px;
  width: 33.33%;
  background: linear-gradient(#ff4500, #008000);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}
.cy {
  text-align: center;
  height: 40px;
  width: 33.33%;
  background: linear-gradient(#008000, #ffa500);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}
.ziti {
  color: #fff;
  padding-top: 18px;
  font-size: 20px;
}

.go-search {
  height: 50px;
  box-sizing: border-box;
  background: linear-gradient(#ffffff, #d2174d);
  padding: 10px 10px 5px 60px;
  text-align: center;
}
.logo {
  position: absolute;
  left: 10px;
}
.search-content {
  background-color: #ebebeb;
  font-size: 16px;
  line-height: 35px;
  border-radius: 5px;
}
.search-content >  {
  display: inline-block;
  vertical-align: middle;
}
</style>
